<template>
	<div class="classListCon">
		<div class="classItems" v-for="(ite,idx) in classPageList" :key="idx">
			<!-- 111 -->
			<div class='classItems_top'>
				<div class="classItems_top_left">
					{{ite.title}}
				</div>
				<div class="classItems_top_right" :class="'color'+ite.status">
					{{ite.status | statusFilter}}
				</div>
			</div>

			<!-- 222 -->
			<div class="classItems_time">
				{{ite.time || ''}}
			</div>
			<!-- 333 -->
			<div class="classItems_time_center">
				{{ite.sub_title || ite.su_title || ''}}
			</div>
			<!-- 222 -->
			<div class="classItems_time">
				{{ite.address || ''}}
			</div>
			<div class="classItems_btn" v-if="isClass != 2">
				<div class="classItems_btn_items" v-if='ite.status == 1' @click='quxiaoEvent(ite.order_id)'>
					取消预约
				</div>
				<div class="classItems_btn_items_right" v-if='ite.status == 1' @click='qiandaoEvent(ite.order_id)'>
					签到
				</div>
				<div class="classItems_btn_items_right" v-if='ite.status == 2' @click='pinjiaEvent(ite.order_id)'>
					评价
				</div>
			</div>

			<div v-else class="classItems_btn">
				<div class="classItems_btn_items" v-if='ite.status == 1' @click='quxiaoEvent(ite.order_id)'>
					取消上课
				</div>
				<div class="classItems_btn_items classItems_btn_items_blue"
					@click='classDetail(ite.order_id,ite.time_id)'>
					查看详情
				</div>
			</div>

		</div>
		<!-- 11 -->
		<u-modal :show="show" @confirm="confirm" :title='modalTitle' @cancel='show=!show' ref="uModal" showCancelButton>
		</u-modal>
		<!-- 11-2 -->
		<u-modal :show="shows" @confirm="confirms" :title='modalTitle' @cancel='shows=!shows' ref="uModals"
			showCancelButton>
		</u-modal>
		<!-- 22 -->
		<u-overlay :show="overShow" @click="overShow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<img :src="QrCode" alt="">

				</view>
			</view>
		</u-overlay>
		<!-- 33 -->

		<div class="mask" @click='pjshow=!pjshow' v-if="pjshow">
			<div class="Evaluation_bottom">
				<div class="Evaluation_bottom_title">
					服务评价
				</div>
				<div class="Evaluation_bottom_sub">
					请评价下苏江服务体验吧～
				</div>
				<div class="Evaluation_bottom_line">

				</div>
				<div class="Evaluation_bottom_str">
					<u-rate active-color="#FFBE2E" @change='pointChange' inactive-color="#F1E5D8" size='35' gutter="5"
						v-model="point"></u-rate>
				</div>
				<div class="Evaluation_bottom_text">
					<!-- {{evaTitle}} --> 感谢评价
				</div>


				<div class="Evaluation_bottom_btn" @click.stop='sendEvnet()'>
					确认评价
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		props: {
			list: [String, Array],

			isClass: [String, Array, Number],
		},
		filters: {
			statusFilter(v) {
				var s = ''
				// 	// 0已取消 1报名中 2已完成 3已评价 4已爽约
				switch (v) {
					case '0':
						s = '已取消'
						break;
					case 1:
						s = '报名中'
						break;
					case 2:
						s = '已完成'
						break;
					case 3:
						s = '已评价'
						break;
					case 4:
						s = '已爽约'
						break;
				}
				return s
			}
		},
		data() {
			return {
				modalTitle: '',
				show: false,
				order_id: '',
				QrCode: '',
				overShow: false,
				pjshow: false,
				evaTitle: '超赞',
				point: 5,
				classPageList: [],
				shows: false
			}
		},
		watch: {
			list(newsVal, oldVal) {
				this.classPageList = newsVal
			}
		},
		mounted() {
			this.classPageList = this.list
		},
		methods: {
			// userCancel
			async confirm() {
				const {
					data
				} = await this.$request(this.$Api.userCancel, {
					order_id: this.order_id
				}, "POST")
				if (data.code !== 0) return
				this.show = false
				uni.showToast({
					title: "取消成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
				this.$emit('upDate')
			},
			// userCancel
			async confirm() {
				const {
					data
				} = await this.$request(this.$Api.personCancel, {
					order_id: this.order_id
				}, "POST")
				if (data.code !== 0) return
				this.show = false
				uni.showToast({
					title: "取消成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
				this.$emit('upDate')
			},
			quxiaoEvent(id) {
				this.modalTitle = '是否取消预约？'
				this.show = true
				this.order_id = id
			},
			quxiaoEvent(id) {
				this.modalTitle = '是否取上课？'
				this.show = true
				this.order_id = id
			},
			async qiandaoEvent(id) {
				const {
					data
				} = await this.$request(this.$Api.userCode, {
					order_id: id
				}, "POST")
				if (data.code !== 0) return
				this.QrCode = data.data.url
				this.overShow = true
			},
			pinjiaEvent(id) {
				this.pjshow = true
				this.order_id = id
			},
			async sendEvnet(id) {
				const {
					data
				} = await this.$request(this.$Api.userComment, {
					order_id: this.order_id,
					point: this.point,
					title: this.evaTitle
				}, "POST")
				if (data.code !== 0) return
				this.pjshow = false
				this.$emit('upDate')
			},
			pointChange(change) {

				switch (change) {
					case 1:
						this.evaTitle = '非常差'
						break;
					case 2:
						this.evaTitle = '差'
						break;
					case 3:
						this.evaTitle = '一般'
						break;
					case 4:
						this.evaTitle = '满意'
						break;
					case 5:
						this.evaTitle = '超赞'
						break;

				}
				console.log('pointChangepointChange', change)
			},
			// 查看详情
			classDetail(id, time_id) {
				uni.navigateTo({
					url: '/pagesA/index/myPage/classDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.classListCon {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.colorHui {
		color: #999 !important;
	}

	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}


	.Evaluation_bottom {
		width: 748rpx;
		height: 570rpx;
		background: #FFFFFF;

		padding: 0 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		// position: relative;

		.Evaluation_bottom_title {
			font-size: 40rpx;
			text-align: center;
			width: 100%;
			margin-top: 46rpx;
		}

		.Evaluation_bottom_sub {
			font-size: 28rpx;
			margin-top: 14rpx;
			text-align: center;
			width: 100%;
			color: #999;
		}

		.Evaluation_bottom_line {
			width: 100%;
			height: 2rpx;
			background: #DDDDDD;
			margin-top: 32rpx;
		}

		.Evaluation_bottom_str {
			margin: 32rpx auto 0 auto;
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.Evaluation_bottom_text {
			font-size: 28rpx;
			color: #FCA129;
			text-align: center;
			margin-top: 40rpx;
		}

		.Evaluation_bottom_btn {
			position: fixed;
			z-index: 1;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 88rpx;
			background: #9013FE;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.Evaluation_top {
		margin: 28rpx auto;
		padding: 0 32rpx;

		.Evaluation_cont_items {
			width: 100%;
			width: 694rpx;
			min-height: 44rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 32rpx 12rpx 32rpx;
			box-sizing: border-box;
		}

		.Evaluation_cont_items_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 108rpx;

			.Evaluation_cont_items_top_left {
				font-size: 32rpx;
				font-weight: bold;
			}

			.Evaluation_cont_items_top_right {
				font-size: 32rpx;
				color: #FF1D1D;
			}

		}

		.Evaluation_cont_items_p {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 14rpx;
		}

		.Evaluation_cont_items_line {
			width: 618rpx;
			height: 2rpx;
			background: #DDDDDD;
			margin-top: 14rpx;
		}

		.Evaluation_cont_items_btn {
			display: flex;
			justify-content: flex-end;
			height: 110rpx;
			align-items: center;

			.Evaluation_cont_items_btn_item {
				width: 164rpx;
				height: 68rpx;
				background: #9013FE;
				color: #fff;
				font-size: 28rpx;
				margin-left: 20rpx;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}

	.classItems {
		width: 100%;
		min-height: 228rpx;
		background: #FFFFFF;
		padding: 18rpx 36rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.classItems_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 50rpx;
			line-height: 50rpx;

			.classItems_top_left {
				font-size: 36rpx;
			}

			.classItems_top_right {
				font-size: 32rpx;
			}
		}

		.classItems_time,
		.classItems_time_center {
			font-size: 28rpx;
			color: #666666;
			margin-top: 14rpx;
		}

		.classItems_btn {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			text-align: center;
			line-height: 68rpx;
			justify-content: flex-end;
			padding: 14rpx 0;

			.classItems_btn_items {
				min-width: 164rpx;
				height: 68rpx;
				border: 1px solid #DDDDDD;
				text-align: center;
				line-height: 68rpx;
			}

			.classItems_btn_items_blue {
				background: #2E61FF;
				margin-left: 24rpx;
				color: #fff;
			}

			.classItems_btn_items_right {
				width: 164rpx;
				height: 68rpx;
				background: #9013FE;
				margin-left: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 68rpx;
			}
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 450rpx;
		height: 450rpx;
		background-color: #fff;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.color1 {
		color: #D0021B !important;
	}

	.color2 {
		color: #9013FE !important;

	}

	.color3,
	.color0 {
		color: #999999 !important;

	}
</style>